class QueryCard extends React.Component {

    constructor(props){
        super(props);
        this.pageCount = 0;
        this.state = { cardList : []};

        this.cardTypeMap = {
            's' : '超级卡',
            'n' : '普通卡'
        }
    }


    updateCardList(page,pageSize){
        let commSelect = this.refs.commSelect;
        let roomInfo = commSelect.commCode + commSelect.buildingCode + commSelect.unitCode + commSelect.floorCode + commSelect.roomCode;
        let params = {
            page : page,
            pageSize : pageSize,
            roomInfo : roomInfo,
            ownerName : this.refs.ownerName.value,
            state : this.refs.state.value,
            cardType : this.refs.cardType.value
        }

        postJson("/card/query.x", params,  (data) => {
            this.pageCount = data.data.size;
            this.setState({cardList : data.data.list});
        });
    }

    onCommChange(){
        this.refs.table.refresh();
    }

    view(obj) {
        let param = {};
        param.cardNo = obj;
        postJson("/card/findCard.x", $.param(param), (data) => {
                data = data.data;
                let output = "<hr/>";
                if (data.cardInfo.cardType == 'n') {
                    for (let i = 0; i < data.cardPerms.length; i++) {
                        output += '&nbsp&nbsp&nbsp&nbsp' + data.cardPerms[i].devStr + '&nbsp&nbsp&nbsp&nbsp<br><hr/>';
                    }
                } else if (data.cardInfo.cardType == 's') {
                    output += '&nbsp&nbsp&nbsp&nbsp[' + data.commName + '] 小区所有权限&nbsp&nbsp&nbsp&nbsp<hr/>';
                }
                layui.layer.open({
                    title: '该卡权限',
                    type: 1,
                    shadeClose: true,
                    content: output
                });
            }
        );
    }

    saveNewExpire(){
        let params = this.refs.expireModal.value;
        let newDate = this.refs.newExpire.value;
        if(params.expandDate){
            let params2 = {cardNo:params.cardNo,endDate : newDate};
            postJson("/card/delayEndDate.x",params2,()=>{
                layui.layer.msg("修改成功");
                this.refs.table.refresh();
            })
        }else {
            params.endDate = newDate;
            console.log(params);
            postJson("/card/lost.x", params, () => {
                layui.layer.alert("恢复成功！");
                this.refs.table.refresh();
            });
        }
        this.refs.newExpire.value = "";
        this.refs.expireModal.close();
    }

    lost(card,state) {
        let param = {};
        param.cardNo = card.cardNo;
        param.LostOrResume = state;
        let confirmStr = state? "确定要恢复该卡么" : "确定要挂失该卡么?挂失后改卡将无法使用！";
        let successStr = state? "恢复成功！" : "挂失成功！";
        layui.layer.confirm(confirmStr, {
            btn: ['确认', '取消'], btn1: () => {
                if(state == 'expiryResume'){
                    this.refs.expireModal.show({value:param});
                }else {
                    postJson("/card/lost.x", param, () => {
                        layui.layer.alert(successStr);
                        this.refs.table.refresh();
                    });
                }
            }
        });

    }

    delete(card){
        layui.layer.confirm("确认删除此卡的记录信息么?<br>(删除不会影响挂失,但会影响恢复此卡，最好确认卡片已丢失)",()=>{
            postJson("/card/delete.x",{cardNo:card.cardNo},()=>{
                layui.layer.msg("删除成功!");
                this.refs.table.refresh();
            })
        })
    }

    expandDate(card){
        layui.layer.confirm("确认要修改过期时间么?",()=>{
            this.refs.expireModal.show({value:{expandDate:true,cardNo:card.cardNo}});
        })
    }

    search(){
        this.updateCardList(1,10);
    }

    getCardOps(card){
        let ret = [];
        let state = card.state;
        ret.push(<Button btnType="normal" size="xs" onClick={()=>this.view(card.cardNo)}>查看</Button>);
        if(state == '01' || state == '03') {
            ret.push(<Button btnType="warm" size="xs" onClick={() => this.lost(card)}>挂失</Button>);
            ret.push(<Button btnType="primary" size="xs" onClick={()=>this.expandDate(card)}>时效</Button>)
        }
        else if(state == '02') {
            ret.push(<Button btnType="disabled" size="xs">挂失</Button>);
            ret.push(<Button size="xs" onClick={()=>this.lost(card,'resume')}>恢复</Button>);
        }
        else if(state == 'E') {
            ret.push(<Button btnType="disabled" size="xs">过期</Button>);
            ret.push(<Button size="xs" onClick={()=>this.lost(card,'expiryResume')}>恢复</Button>)
            ret.push(<Button btnType="danger" size="xs" onClick={()=>this.delete(card)}>删除</Button>)
        }

        return ret;
    }


    render(){
        return (
            <Frame header="门禁卡列表">
                <Form ref="form" type="pane">
                    <Item>
                        <Label>姓名</Label>
                        <Input ref="ownerName"/>

                        <Select ref="state">
                            <option value="">卡状态</option>
                            <option value='01' >在用</option>
                            <option value='02' >停用</option>
                            <option value='E' >过期</option>
                        </Select>

                        <Select ref="cardType">
                            <option value="">卡类别</option>
                            <option value='n' >普通卡</option>
                            <option value='s'>超级卡</option>
                        </Select>
                    </Item>
                    <Item>
                        <Label>楼栋信息</Label>
                        <LayuiCommSelect ref="commSelect" onChangeComm={(comm)=>this.onCommChange(comm)}></LayuiCommSelect>
                        <Button onClick={()=>this.search()}>查询</Button>
                    </Item>

                    <Table ref="table" count={this.pageCount} pageOnClick={(page,pageSize)=>this.updateCardList(page,pageSize)} size="sm">
                        <thead>
                        <tr>
                            <th>门禁卡编号</th>
                            <th>业主名称</th>
                            <th>住宅信息</th>
                            <th>开卡时间</th>
                            <th>有效期至</th>
                            <th>最后修改时间</th>
                            <th>卡类型</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        {
                            this.state.cardList.length>0?this.state.cardList.map((card)=>{
                                return(
                                    <tr>
                                        <td>{card.cardNo}</td>
                                        <td>{card.ownerName}</td>
                                        <td>{card.roomName}</td>
                                        <td>{card.beginDate}</td>
                                        <td>{card.endDate?card.endDate.substr(0,10):'永久'}</td>
                                        <td>{card.lastModifyTime}</td>
                                        <td style={card.cardType === 's'?{color:'green',fontWeight:700}:{}}>{this.cardTypeMap[card.cardType]}</td>
                                        <td>{this.getCardOps(card)}</td>
                                    </tr>
                                )
                            }):''
                        }
                        </tbody>
                    </Table>
                    <Modal title="请重新调整过期时间" ref="expireModal">
                        <DateSelect placeHolder="不填则表示永久" ref="newExpire" min={1}></DateSelect>
                        &nbsp;
                        <Button lay-submit="true" onClick={()=>this.saveNewExpire()}>确定</Button>
                    </Modal>
                </Form>
            </Frame>
        )
    }

}

ReactDOM.render(<QueryCard/>,document.getElementById("queryCard"));